<template>
  <div>
    <el-card :body-style="{ padding: '20px' }" shadow="nerver">
      <div slot="header">
        <span>添加问卷</span>
      </div>
      <!-- card body -->
      <el-form label-width="80px" >
        <el-form-item label="标题">
          <el-input v-model="form.title" placeholder></el-input>
        </el-form-item>
        <el-form-item label="班级">
          <el-select placeholder="请选择" v-model="form.class_id">
            <el-option
              v-for="cls in classes"
              :key="'cls_'+cls.id"
              :label="cls.class_name+'班'"
              :value="cls.id"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="选项">
          <el-select placeholder="请选择" v-model="form.item">
            <el-option
              v-for="item in items"
              :key="'item_'+item.id"
              :label="item.item_name"
              :value="JSON.stringify(item.children)"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="大纲" label-width="80px">
          <el-tree
            :data="outlines"
            :props="{label:'outline_name'}"
            @check-change="checkChange"
            :show-checkbox="true"
            :render-after-expand="false"
          ></el-tree>
        </el-form-item>
        <el-form-item>
          <el-button @click="add()">添加</el-button>
        </el-form-item>
      </el-form>
      {{form}}
    </el-card>
  </div>
</template>
<script>

export default {
  data() {
    return {
      form:{
          title:'',
          class_id:'',
          item:'',
          content:[]
      },
      classes: [],
      items: [],
      outlines: []
    };
  },
  created() {
    this.getclasses();
    this.getitems();
    this.getoutlines();
  },
  methods: {
    //   添加
    add(){
        this.axios.post('/papers/add',{
                title:this.form.title,
                item:this.form.item,
                class_id:this.form.class_id,   
                content:JSON.stringify(this.form.content),  
        }).then(()=>{
            this.$router.push({
                name:'papers'
            })
        }).catch(()=>{})

    },
    //   获取节点
    checkChange(data,flag){
        if(data.children.length==0){
            console.log(data)//获取叶子节点
            console.log(flag)//当选中就是时true 
            if(flag){
            this.form.content.push(data)//把获取叶子节点推送到content里面去
                      }else{
                            let i=this.form.content.indexOf(data);
                            this.form.content.splice(i,1)
            
        }
        }
        
    },
    //   获取大纲
    getoutlines() {
      this.axios.get("/outlines").then(ret => {
        this.outlines = ret.data.data;
      });
    },

    //   获取选项
    getitems() {
      this.axios.get("/items").then(ret => {
        this.items = ret.data.data;
        console.log(this.items);
      });
    },

    //   获取班级
    getclasses() {
      this.axios
        .get("/classes", {
          params: {
            pageSize: 9999,
            currentPage: 1
          }
        })
        .then(ret => {
          this.classes = ret.data.data.rows;
        });
    }
  }
};
</script>
<style>
.el-tree-node__content {
  border: 1px solid #eee;
  margin-top: 10px;
  padding: 10px;
}
</style>


